<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content {
            width: 200px;
            height: 200px;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div id="content"></div>
    <div class="box">111</div>
    <div class="box">222</div>
    <div class="box" name="abc">333</div>
    <input type="text" name="text">
    <a href="#" name="def">超链接</a>
    <input type="radio" name="text" id="">


    <select name="" id="">
        <option value="">成都</option>
        <option value="">成都</option>
        <option value="">成都</option>
        <option value="">成都</option>
    </select>
    <p>lorem001</p>
    <p>lorem002</p>
    <p>lorem003</p>
    <p>lorem004</p>
    <p>lorem005</p>

    <button id="btn">添加元素</button>


    <script>
        //===== DOM2级快速获取元素节点 =====
        //----- 1.getElementById() 通过id名查找节点，直接返回对应的元素
        let content = document.getElementById('content');
        console.log(content);

        //----- 2.getElementsByClassName() 
        //通过类名获取元素，返回一个伪数组
        let boxes = document.getElementsByClassName('box');
        console.log(boxes);
        console.log(boxes[0]);

        //----- 3.getElementsByTagName()
        //通过标记名获取元素
        let divs = document.getElementsByTagName('div');
        console.log(divs);

        //----- 4.getElementsByName() 
        //通过name属性查找元素节点
        let eles = document.getElementsByName('text');
        console.log(eles);

        //----- 5.querySelector()  通过css选择器获取元素，获取到匹配选择器的第一个元素
        let div = document.querySelector('.box')
        console.log(div);

        //---- 6.querySelectorAll() 通过css选择器获取元素，获取到匹配选择器的所有元素
        let divs2 = document.querySelectorAll('.box');
        console.log(divs2);

        let htmlCollection = document.getElementsByTagName('p');
        let nodeList = document.querySelectorAll('p');


        //----  HTMLCollection 和 NodeList都是一个伪数组
        //---- HTMLCollection是一个实时的集合，如果有新添加元素，会在集合中更新出来
        //---- NodeList 不是一个实时集合，获取时有多少个节点，就是多少个，不会再变化
        //获取按钮
        let btn = document.getElementById('btn');
        //绑定点击事件，没点击一次添加一个p元素
        btn.onclick = function () {
            //创建一个p元素节点  <p></p>
            let newP = document.createElement('p');
            //创建一个文本节点  这是我新添加的p元素
            let text = document.createTextNode('这是我新添加的p元素');
            //把文本节点放进p元素当中
            newP.appendChild(text);
            //把p元素放进body当中
            document.body.appendChild(newP);

            console.log(htmlCollection);
            console.log(nodeList);

        }


    </script>
</body>

</html>